<template>

  <!--    申请离职-->
  <div>
    <span>
 <el-alert title="辞职的流程是：
　　1、员工原则上应提前30天将书面《辞职报告》交到相关部门 ,并领取离职手续表。人事行政部对离职员工进行离职面谈, 了解其离职原因并做记录。
　　2、按照离职手续表办理相关手续:
　　(1)、离职员工将离职手续表交部门负责人签字。部门主管以上岗位需经总经理签字。
   (2)、由离职员工所在部门的助理向离职员工收回工作证,员工手册 ,工作服 ,办公用品,确认上交无误后由助理签字确认 .
　　(3)、由财务部检查离职员工与公司在财务上是否有拖欠(包括所借款项 ,出差报销 )，如有拖欠当场清还，无拖欠则由财务部在离职手续表上签字确认。
　　(4)、离职员工在得到离职手续表上所有需要的签名后,填写下表，申请成功后，人事行政部向员工出具离职证明，员工离职成功。" type="warning" style="margin-bottom: 60px"/>
      </span>
    <el-form :model="resigned" :rules="resignedRules" ref="resigned"
             label-width="200px"
             class="demo-ruleForm"
             :size="resigned"
             status-icon>
      <el-form-item label="申请离职类型" prop="type1">
        <el-select v-model="emp.type1" placeholder="请输入离职类型" size="large" prefix-icon="el-icon-edit">
          <el-option
              v-for="(item, index) in type1"
              :key="index"
              :label="item"
              :value="index">
          </el-option>
        </el-select>
        <!--                            <el-input size="mini" style="width: 100px" prefix-icon="el-icon-edit"-->
        <!--                                      v-model="emp.post_name" disabled></el-input>-->
      </el-form-item>

      <el-form-item label="申请离职日期" required>
        <el-col :span="8">
          <el-form-item prop="date1">
            <el-date-picker
                v-model="resigned.date1"
                type="date"
                label="具体申请日期"
                placeholder="具体申请日期"
                style="width: 90%"
            />
          </el-form-item>
        </el-col>
        <!--          <el-col class="text-center" :span="2">-->

        <!--          </el-col>-->
        <el-col :span="8">
          <el-form-item prop="date2" >
            <el-time-picker
                v-model="resigned.date2"
                label="具体申请时间"
                placeholder="具体申请时间"
                style="width: 90%"
            />
          </el-form-item>
        </el-col>
      </el-form-item>
      <el-form-item label="申请离职具体原因:" prop="reasons_for_resignation">
        <el-input type="textarea" v-model="resigned.reasons_for_resignation" style="width: 300px" clearable maxlength="150" show-word-limit></el-input>
      </el-form-item>
      <el-form-item label="离职后去向" prop="leave_goal">
        <el-input type="textarea" v-model="resigned.leave_goal" style="width: 300px" clearable maxlength="50" show-word-limit></el-input>
      </el-form-item>
      <el-button-group>
        <el-button class="button1" type="warning" size="large" @click="applyResigned">提交</el-button>
        <el-button class="button2" type="info" size="large" @click="resetForm('resigned')">重置</el-button>
      </el-button-group>
    </el-form>
  </div>
</template>

<script>
import {Message} from "element-ui";
export default {
  name: "ApplyQuit",
  data() {
    return {
      emp: {
        id : "",
        password : "",
        employee_type : "",
        name : "",
        sex : "",
        birthday : "",
        id_card : "",
        political : "",
        nation : "",
        native_place : "",
        phone : "",
        email : "",
        height : null,
        blood_type :"",
        marital_status : "",
        birthplace : '',
        registered_residence : "",
        department_number : null,
        department_name : "",
        post_number : null,
        post_name : "",
        entry_date : "",
        employment_form : "",
        personnel_source : "",
        highest_education : "",
        graduation_school : "",
        major_studied : "",
        graduation_date : "",
        is_quit : "",

      },
      resigned : {
        id : '',
        name : '',
        sex : '',
        resignation_date : null,
        reasons_for_resignation : null,
        department_number : null,
        department_name : null,
        post_number : null,
        post_name : null,
        date1 : null,
        date2 : null,
        type1 : null,
        leave_goal: "",
      },
      resignedRules : {
        reasons_for_resignation : [{required : true, message : "请输入离职原因", trigger : 'blur'}],
      },
      employee_types:['总裁', '主管', '员工'],
      politicals: ['群众', '共青团员', '中共预备党员', '中共党员', '无党派人士', '其他'],
      nations: [
        '蒙古族', '藏族', '苗族', '壮族', '回族', '维吾尔族', '彝族', '布依族',
        '朝鲜族', '侗族', '白族', '哈尼族', '傣族', '傈僳族', '畲族', '拉祜族',
        '满族', '瑶族', '土家族', '哈萨克族', '黎族', '佤族', '高山族', '水族',
        '东乡族', '景颇族', '土族', '仫佬族', '布朗族', '毛南族', '锡伯族', '普米族',
        '纳西族', '柯尔克孜族', '达斡尔族', '羌族', '撒拉族', '仡佬族', '阿昌族', '塔吉克族',
        '怒族', '俄罗斯族', '德昂族', '裕固族', '塔塔尔族', '鄂伦春族', '门巴族', '基诺族',
        '乌孜别克族', '鄂温克族', '保安族', '京族', '独龙族', '赫哲族', '珞巴族', '汉族',
        '其他',
      ],
      blood_types:['A型', 'B型', 'AB型', 'O型', '其他'],
      department_names : ['开发部', '运维部', '测试部', '设计部', '策划部'],
      post_names : {
        '开发部' : ['C++开发', 'Java开发', 'C#开发', 'Python开发', 'Go开发'],
        '运维部' : ['云运维', '服务器运维'],
        '测试部' : ['系统测试', 'Bug测试'],
        '设计部' : ['UI设计', '动画设计'],
        '策划部' : ['策划', '系统策划'],
      },
      type1 : ['个人原因' ,'公司辞退' ,'合同到期'],
      post_type_options : [],
      employee_forms:['实习生', '正式职工'],
      highest_educations: ['小学', '初中', '中专/高中', '专科', '本科', '硕士', '博士', '其他'],
      personnel_sources:['校招', '社招'],
      emps : [],
      loading : false,
      currentPage: 1,
      pageSize: 10,
      title : '',
      dialogShowVisible : false,
      rules: {
        id : [{required : true, message : '请输入编号', trigger : 'blur'}],
        password : [{required : true, message : '请输入密码', trigger : 'blur'}],
        employee_type : [{required : true, message : '请输入员工类型', trigger : 'blur'}],
        name: [{required : true, message : '请输入姓名', trigger : 'blur'}],
        sex: [{required : true, message : '请输入性别', trigger : 'blur'}],
        birthday: [{required : true, message : '请输入出生日期', trigger : 'blur'}],
        id_card: [{required : true, message : '请输入身份证号码', trigger : 'blur'}, {
          pattern : /(^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$)|(^[1-9]\d{5}\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{2}$)/,
          message : '身份证号码格式不正确',
          trigger : 'blur'
        }],
        political : [{required : true, message : '请输入政治面貌', trigger : 'blur'}],
        nation : [{required : true, message : '请输入民族', trigger : 'blur'}],
        native_place : [{required : true, message : '请输入籍贯', trigger : 'blur'}],
        phone : [{required : true, message : '请输入电话号码', trigger : 'blur'}],
        email : [{required : true, message : '请输入邮箱地址', trigger : 'blur'}, {
          type : 'email',
          message : '邮箱格式不正确',
          trigger : 'blur'
        }],
        height : [{required : true, message : '请输入身高', trigger : 'blur'}],
        blood_type : [{required : true, message : '请输入血型', trigger : 'blur'}],
        marital_status : [{required : true, message : '请输入婚姻状况', trigger : 'blur'}],
        birthplace : [{required : true, message : '请输入出生地', trigger : 'blur'}],
        registered_residence : [{required : true, message: '请输入户口所在地', trigger : 'blur'}],
        department_number : [{required : true, message : '请输入部门编号', trigger : 'blur'}],
        department_name : [{required : true, message : '请输入部门名称', trigger : 'blur'}],
        post_number : [{required : true, message : '请输入岗位编号', trigger : 'blur'}],
        post_name : [{required : true, message : '请输入岗位名称', trigger : 'blur'}],
        entry_date : [{required : true, message : '请输入入职日期', trigger : 'blur'}],
        employment_form : [{required : true, message : '请输入用工形式', trigger: 'blur'}],
        personnel_source : [{required : true, message : '请输入人员来源', trigger : 'blur'}],
        highest_education : [{required : true, message : '请输入最高学历', trigger : 'blur'}],
        graduation_school : [{required : true, message : '请输入毕业院校', trigger : 'blur'}],
        major_studied : [{required : true, message : '请输入所学专业', trigger : 'blur'}],
        graduation_date : [{required : true, message : '请输入毕业日期', trigger : 'blur'}],
        is_quit : [{required : true, message : '请输入是否离职', trigger : 'blur'}],

        nationId: [{required: true, message: '请输入您组', trigger: 'blur'}],
        jobLevelId: [{required: true, message: '请输入职称', trigger: 'blur'}],
        posId: [{required: true, message: '请输入职位', trigger: 'blur'}],
        // workState: [{required: true, message: '请输入工作状态', trigger: 'blur'}],
        // contractTerm: [{required: true, message: '请输入合同期限', trigger: 'blur'}],
        // conversionTime: [{required: true, message: '请输入转正日期', trigger: 'blur'}],
        // notworkDate: [{required: true, message: '请输入离职日期', trigger: 'blur'}],
        // beginContract: [{required: true, message: '请输入合同起始日期', trigger: 'blur'}],
        // endContract: [{required: true, message: '请输入合同结束日期', trigger: 'blur'}],
        // workAge: [{required: true, message: '请输入工龄', trigger: 'blur'}],
      },

    }
  },
  mounted() {
    this.initEmps();
  },
  computed : {
    empsData() {
      console.log("emps.length = ", this.emps.length);
      if (this.emps.length > 0) {
        return this.emps.slice( (this.currentPage -1) * this.pageSize, this.currentPage * this.pageSize) || [];
      }
      console.log("emps = ", this.emps);
      return this.emps;
    }
  },
  methods : {
    initEmps(type) {
      this.loading = true;
      this.emp.id = localStorage.getItem("id");
      this.$axios.post('/ApplyResignedInformation', this.emp).then(resp => {
        this.loading = false;
        if (resp) {
          this.emps = resp.data;
          this.emp = this.emps[0];
          this.total = resp.total;
        }
      })
    },
    showMyData(data) {
      this.title = '查看员工信息';
      this.emp = data;
      this.dialogShowVisible = true;
    },
    changeEditSelect() {
      // 清空部门内容
      this.emp.post_name = ''

      // 遍历部门的下拉选项数组
      for (const k in this.department_names) {
        // 岗位名称 是否等于 部门名称的下拉选择数组中的某一项
        if (this.emp.department_name === this.department_names[k]) {
          this.post_type_options = this.post_names[this.emp.department_name]
        }
      }
      console.log("post_type_options = "+this.post_type_options);
    },
    resetForm(data) {
      this.$refs[data].resetFields();
      this.initEmps();
    },
    applyResigned() {
      this.initEmps();
      this.$refs['resigned'].validate(valid => {
        if (valid) {
          if (this.emp.employee_type === "总裁") {
            Message.error({message : "您是总裁，不能离职"});
          } else {
            this.$confirm(this.emp.name + "，确定要离职吗？", {
              confirmButtonText : '确定',
              cancelButtonText : '取消',
              type : 'warning',
            }).then(() => {
              this.resigned.id = this.emp.id;
              this.resigned.name = this.emp.name;
              this.resigned.sex = this.emp.sex;
              this.resigned.department_number = this.emp.department_number;
              this.resigned.department_name = this.emp.department_name;
              this.resigned.post_number = this.emp.post_number;
              this.resigned.post_name = this.emp.post_name;

              console.log("离职信息：", this.resigned);
              this.$axios.post('/ApplyResigned', this.resigned).then((resp) => {
                if (resp.data.msg === "离职成功") {
                  Message.success({message : resp.data.msg});
                  this.$router.push('/');
                } else {
                  Message.error({message : resp.data.msg});
                }
              })
            }).catch(() => {
              Message.info({message : "已取消离职"});
            })

          }
        }
      });

    }
  }
}
</script>

<style scoped>
.button1{
  position: center;
  margin-left: 500px;
  margin-top: 45px;
}
.button2{
  position: center;
  margin-center: 500px;
  margin-top: 45px;
}
</style>
